<template>
  <view class="total-container">
    <view class="content">
      <view class="raw" v-for="(item, index) in subjectList" :key="index">
        <view class="subject">{{ item.subject }}</view>
        <view class="title">{{ item.title }}</view>
        <view
          class="image"
          :style="{ backgroundImage: `url(${item.logo}}})` }"
          @click="previewImage(item.logo)"
        >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { previewImage } from "@/utils/tool.js";

const subjectList = ref([
  {
    subject: "前端学习路线",
    title: "这是前端技术所有掌握的大体框架",
    logo: "https://img0.baidu.com/it/u=4229287575,1783502520&fm=253&fmt=auto&app=138&f=JPEG?w=657&h=500",
  },
  {
    subject: "后端学习路线",
    title: "这是后端技术所有掌握的大体框架",
    logo: "https://img2.baidu.com/it/u=2529133014,789196717&fm=253&fmt=auto&app=138&f=JPEG?w=833&h=500",
  },
  {
    subject: "安卓学习路线",
    title: "这是Android开发所有掌握的大体框架",
    logo: "https://img2.baidu.com/it/u=2016791469,1988759969&fm=253&fmt=auto&app=138&f=PNG?w=1144&h=500",
  },
]);
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.total-container {
  padding: 20rpx 40rpx;

  // reference：参考
  .content {
    margin-top: 15rpx;
    background-color: #fff;

    .raw {
      margin-bottom: 50rpx;

      .subject {
        // font-size: 36rpx;
        // font-weight: 900;
        padding: 10rpx 20rpx;
        margin-bottom: 15rpx;

        background-image: linear-gradient(
          to right,
          #7e9eff,
          #f2f7ff,
          #ffffff,
          #ffffff,
          #ffffff
        );
      }
      .text {
        font-size: 29rpx;
        line-height: 40rpx;
        color: #5f5f5f;
        text-indent: 2em;
      }

      .image {
        display: flex;
        // align-items: center;
        // justify-content: center;
        margin: 20rpx 0;

        width: 100%;
        height: 440rpx;
        background-size: cover;
      }
    }
  }
}
</style>
